<template>
  <transition>
    <div class="insurance-price-info">
    <div class="app-main">
      <ul class="module-step">
        <li class="item">
          <span class="count">1</span>
          <span class="title">车辆信息</span>
        </li>
        <li class="item ">
          <span class="count">2</span>
          <span class="title">投保方案</span>
        </li>
        <li class="item active">
          <span class="count">3</span>
          <span class="title">报价信息</span>
        </li>
        <li class="item">
          <span class="count">4</span>
          <span class="title">申请核保</span>
        </li>
      </ul>
      <div class="module-price">
        您的爱车报价为
        <div class="price">￥<span class="count">598</span></div>
      </div>
      <div class="module-car">
        <mt-cell title="车牌号">
          <span>粤A0000</span>
        </mt-cell>
        <mt-cell title="保险公司">
          <span>中国平安保险公司</span>
        </mt-cell>
      </div>
      <div class="module-info">
        <div class="info-header">商业保险详情<span class="info-header-right">小计：<span class="price">￥2350.09</span></span></div>
         <dd class="item">
            <span class="item-content item-left">险种</span>
            <span class="item-content item-middle">保额</span>
            <span class="item-content item-right">保费</span>
          </dd>
        <dd class="item item-info">
          <span class="item-content item-left">第三者责任险</span>
          <span class="item-content item-middle">67651.25</span>
          <span class="item-content item-right">616.75</span>
        </dd>
        <dd class="item item-info">
          <span class="item-content item-left">玻璃单独破碎险</span>
          <span class="item-content item-middle">67651.25</span>
          <span class="item-content item-right">616.75</span>
        </dd>
        <dd class="item item-info">
          <span class="item-content item-left" style="width: 60%">机动车辆损失不计免赔</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">616.75</span>
        </dd>
        <dd class="item-footer">
          车辆损失险（￥270）、第三者（￥270.5）、司机（￥20.5）、乘
          客（￥20.5）、全车盗抢险（￥20.5）
        </dd>
      </div>
      <div class="module-info">
        <div class="info-header">交强险车船税<span class="info-header-right">小计：<span class="price">￥2350.09</span></span></div>
        <dd class="item">
          <span class="item-content item-left">险种</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">保费</span>
        </dd>
        <dd class="item item-info">
          <span class="item-content item-left">交强险</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">1000</span>
        </dd>
        <dd class="item item-info">
          <span class="item-content item-left">车船税</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">1000</span>
        </dd>
      </div>
      <div class="module-info">
        <div class="info-header">其他信息</div>
        <dd class="item">
          <span class="item-content item-left">商起保日</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">2019-06-16</span>
        </dd>
        <dd class="item">
          <span class="item-content item-left">商截保日</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">2019-08-16</span>
        </dd>
        <dd class="item">
          <span class="item-content item-left">商业折扣</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">0.00023</span>
        </dd>
        <dd class="item">
          <span class="item-content item-left">交强折扣</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">0.43322</span>
        </dd>
        <dd class="item">
          <span class="item-content item-left">商业出险情况</span>
          <span class="item-content item-right" style="width:70%;">新保或上年发生一次赔款</span>
        </dd>
      </div>
      <div class="module-info">
        <div class="info-header">车辆信息</div>
        <dd class="item">
          <span class="item-content item-left">发动机号</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">54522444455</span>
        </dd>
        <dd class="item">
          <span class="item-content item-left">车架号</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">LSEFFEWFEEF</span>
        </dd>
        <dd class="item">
          <span class="item-content item-left">登记日期</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">2016-02-20</span>
        </dd>
      </div>
      <div class="module-insurance-count">
        <div class="module">
          <div class="module-header">
            车险优惠试算
          </div>
          <div class="module-calculator">
            <div class="module-company">
              <div class="company-title">保险公司</div>
              <div class="company-body">
                <mt-radio
                  title=""
                  v-model="selectType"
                  :options="optionsCustomer">
                </mt-radio>
              </div>
            </div>
            <div class="item-line">
              <span class="addon">商业险优惠</span>
              <div class="content">
                <span class="addon-discount">{{companyDiscount1}}</span> X
                <input class="input-discount" placeholder="" v-model="inputDiscount1"></input>
              </div>
            </div>
            <div class="item-line">
              <span class="addon">交强险优惠</span>
              <div class="content">
                <span class="addon-discount">{{companyDiscount2}}</span> X
                <input class="input-discount" placeholder="" v-model="inputDiscount2"></input>
              </div>
            </div>
          </div>
          <div class="discount-num">共优惠<span class="line">{{getNum}}</span>元</div>
        </div>
      </div>
      <div class="button-content-bottom">
      <mt-button type="primary" @click.native="handleToNext">申请核保</mt-button>
      </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import { Swipe, SwipeItem} from 'mint-ui';
export default {
  data () {
    return {
      companyDiscount1:'35%',
      companyDiscount2:'10%',
      selectType:'0',
      inputDiscount1:'',
      inputDiscount2:'',
      optionsCustomer:[
        {
          label: '中国人保',
          value: '0'
        },
        {
          label: '平安保险',
          value: '1'
        },
        {
          label: '鼎和财险',
          value: '2'
        },],
    }
  },
  computed:{
    getNum:function(){
      var sum = 0;
      const countFirst=this.inputDiscount1*(this.companyDiscount1.split('%')[0])/100;
      const countSecond=this.inputDiscount2*(this.companyDiscount2.split('%')[0])/100;
      sum=parseFloat((countFirst+countSecond).toFixed(2))
      return sum;
    },
  },
  watch:{
    'selectType'(val){
      if(val=='0'){
        this.companyDiscount1='35%'
        this.companyDiscount2='10%'
      }else if(val=='1'){
        this.companyDiscount1='32%'
        this.companyDiscount2='10%'
      }else if(val=='2'){
        this.companyDiscount1='33%'
        this.companyDiscount2='10%'
      }
    }
  },
  mounted(){

  },
  methods:{

    handleToNext(){

      this.$router.push({path:'/insurance-application'})
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .insurance-price-info .app-main{
    padding:0 0 62px;
  }
  .insurance-price-info .module-step{
    background: #fff;
    display: flex;
    padding:20px 0;
  }
  .insurance-price-info .module-step .item{
    position: relative;
    width: 25%;
    text-align: center;
  }
  .insurance-price-info .module-step .item:before{
    background: #007EE5;
    position: absolute;
    top:8px;
    left: 0;
    content: '';
    width: 50%;
    height: 1px;
  }
  .insurance-price-info .module-step .item:after{
    background: #007EE5;
    position: absolute;
    top:8px;
    content: '';
    width: 50%;
    height: 1px;
  }
  .insurance-price-info .module-step .item:first-child:before,.insurance-price-info .module-step .item:last-child:after{
    background: #fff;
  }
  .insurance-price-info .module-step .item.active .count{
    background: #007EE5;
    color: #fff;
  }
  .insurance-price-info .module-step .count{
    background: #fff;
    position: relative;
    z-index: 10;
    display: inline-block;
    width: 17px;
    height: 17px;
    line-height: 17px;
    border-radius: 50%;
    border: 1px solid #007EE5;
    color: #007EE5;
    font-size: 13px;
  }
  .insurance-price-info .module-step .title{
    display: block;
    padding:4px 0 0;
    color: #007EE5;
  }
  .insurance-price-info .button-content-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    display: flex;
    box-shadow: 0px -6px 4px 0px rgba(0, 0, 0, 0.03);
  }
  .insurance-price-info .button-content-bottom .mint-button{
    display: flex;
    flex: 1;
    border-radius: 0;
    justify-content: center;
    font-size: 16px;
    box-shadow: none;
    height: 50px;

  }

  .insurance-price-info .module-price{
    background: #fff;
    padding:20px 0;
    margin:10px 0;
    text-align: center;
    font-size: 15px;
    color: #888;
  }
  .insurance-price-info .module-price .price{
    padding:2px 0 0;
    color: red;
  }
  .insurance-price-info .module-price .count{
    font-size: 36px;
  }
  .insurance-price-info .module-car{
    margin:0 0 10px;
  }
  .insurance-price-info .module-info{
    background: #fff;
    padding:0 0 10px 10px;
    margin:0 0 10px;
  }
  .insurance-price-info .module-info .info-header{
    padding:12px 12px 12px 0;
    margin:0 0 6px;
    font-size: 15px;
    border-bottom:1px solid #f5f5f5;
  }
  .insurance-price-info .module-info .info-header-right{
    float: right;
  }
  .insurance-price-info .module-info .price{
    color: red;
  }
  .insurance-price-info .module-info .item{
    display: flex;
    margin: 0;
    padding:6px 12px 6px 0;
    font-size: 14px;
  }
  .insurance-price-info .module-info .item-content{
    width: 33.2%;
  }
  .insurance-price-info .module-info .item-info{
    color: #666;
  }
  .insurance-price-info .module-info .item-content.item-middle{
    text-align: center;
  }
  .insurance-price-info .module-info .item-content.item-right{
    text-align: right;
  }
  .insurance-price-info .module-info .item-footer{
    margin: 0;
    padding:6px 0;
    font-size: 14px;
    color: #666;
    text-align: left;

  }
  .module-insurance-count{
    padding:14px;
  }
  .module-insurance-count .module{
    background: #fff;
    padding:0 0 24px;
    border-radius:5px;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.01);
  }
  .module-insurance-count .module .module-header{
    background:#007EE5;
    padding:10px 0;
    text-align: center;
    color: #fff;
    font-size: 16px;
    border-radius:5px 5px 0 0
  }
  .module-insurance-count .module-company{
    font-size: 15px;
  }
  .module-insurance-count .module-company .company-title{
    padding:12px 16px 0;
  }
  .module-insurance-count .module-company .mint-cell{
    width: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .module-insurance-count .module-calculator .item-line{
    padding:10px 24px 0;
    font-size: 15px;
  }
  .module-insurance-count .module-calculator .item-line .addon{
    display: inline-block;
    vertical-align: middle;
    width:30%;
  }
  .module-insurance-count .module-calculator .item-line .content{
    display: inline-block;
    vertical-align: middle;
    width:64%;
  }
  .module-insurance-count .addon-discount{
    display: inline-block;
    width: 30px;
    text-align: right;
    margin-right: 6px;
  }
  .module-insurance-count .input-discount{
    width:120px;
    margin-left: 6px;
    border-radius:3px;
    outline:none;
    font-size: 14px;
    padding:6px;
    border:1px solid #ddd;
  }
  .module-insurance-count .discount-num{
    padding:18px 52px 0;
    text-align: right;
    font-size: 15px;
  }
  .module-insurance-count .discount-num .line{
    display: inline-block;
    min-width:50px;
    padding:2px 4px;
    margin:0 12px;
    border-bottom:1px solid #ddd;
    color:#ef3b3c;
    text-align: center;
  }

</style>
